<template>
	<!-- 用户收货地址 -->
	<div style="width: 100%;">
		<Header></Header>

		<div style="width: 1000px;margin: auto;margin-top: 30px;">
			<el-button type="primary" @click="show=true">添加地址</el-button>

			<el-table :data="dz" style="width: 100%">


				<el-table-column label="收货人" width="150">
					<template #default="scope">
						{{scope.row.uname}}
					</template>
				</el-table-column>
				<el-table-column label="电话" width="180">
					<template #default="scope">
						{{scope.row.utel}}
					</template>
				</el-table-column>
				<el-table-column label="详细地址" width="260">
					<template #default="scope">
						{{scope.row.sheng}}{{scope.row.shi}}{{scope.row.qu}}{{scope.row.address}}
					</template>
				</el-table-column>
				<el-table-column label="默认" width="100" prop='moren'>
					<template #default="scope">
						<div v-if="scope.row.moren==1">是</div>
						<div v-if="scope.row.moren==0">否</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80">
					<template #default="scope">
						<el-button size="small" type='daner' @click="xzdz(scope.row)">确认</el-button>
					</template>
				</el-table-column>
			</el-table>


			<el-dialog v-model="show" title="收货地址" width="60%">
				<el-form :model="shouhuo" :rules="rules" ref="shouhuo">
					<el-form-item label="联系人" prop="uname" label-width="600">
						<el-input v-model="shouhuo.uname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="utel" label-width="600">
						<el-input v-model="shouhuo.utel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="省份" prop="sheng" label-width="600">
						<el-input v-model="shouhuo.sheng" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="城市" prop="city" label-width="600">
						<el-input v-model="shouhuo.city" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="区县" prop="qu" label-width="600">
						<el-input v-model="shouhuo.qu" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="详细地址" prop="address" label-width="600">
						<el-input v-model="shouhuo.address" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label-width="600">
						<el-button @click="temp = 0">取消</el-button>
						<el-button type="primary" @click="addDizhi('shouhuo')">添加</el-button>
					</el-form-item>
				</el-form>


			</el-dialog>
		</div>
	</div>
</template>
<script>
	import Axios from 'axios'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import router from "../route/index.js"
	import Header from './Header'
	export default {
		name: 'Shoucang',
		components: {
			Header
		},
		data() {
			return {
				dz: [],
				users: {},
				temp: 0,
				show: false,
				shouhuo: {},
				rules: {
					uname: [{
						required: true,
						message: '请填写收货人',
						trigger: 'blur'
					}],
					sheng: [{
						required: true,
						message: '请填写省份',
						trigger: 'blur'
					}],
					city: [{
						required: true,
						message: '请填写城市',
						trigger: 'blur'
					}],
					qu: [{
						required: true,
						message: '请填写区县',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请填写详细地址',
						trigger: 'blur'
					}],
					utel: [{
						required: true,
						message: '请填写联系电话',
						trigger: 'blur'
					}, {
						pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/,
						message: '请输入电话正确格式',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this.getUsers();
			this.getSupplier();
		},
		methods: {
			getUsers() {
				// 获取sessionstorage中的用户信息
				let str = sessionStorage.getItem('users')
				if (str != null) {
					//把字符串转换成对象 --- sessionStorage存的必须时字符串，所以取出来的也是字符串
					this.users = JSON.parse(str);
				} else {
					alert('请先登录')
				}
			},
			getSupplier() {
				Axios.post('/shopmng/api/dizhi/selecUid', {
					uid: this.users.uid
				}).then(res => {
					this.dz = res.data;
				});
			},
			formatTime(val) {
				return val.substr(0, 10)
			},
			deleteSupplier(obj, index) {
				ElMessageBox.confirm(
					'确认删除吗？', {
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						type: 'warning',
					}
				).then(() => {
					Axios.post('/shopmng/api/shoucang/deleteOne', {
						'sid': obj.sid
					}).then(res => {
						if (res.data.affectedRows == 1) {
							this.sc.splice(index, 1);
							ElMessage({
								message: '删除成功',
								type: 'success',
							});
						} else {
							ElMessage({
								message: '删除失败',
							});
						}
					});

				})
			},

			editSupplier(val) {
				sessionStorage.setItem('g', JSON.stringify(val));
				router.push('/ShowOne');
			},
			addDizhi(shouhuo) {
				this.$refs[shouhuo].validate(valid => {
					if (valid) {
						let dz = {
							uid: this.users.uid,
							uname: this.shouhuo.uname,
							utel: this.shouhuo.utel,
							sheng: this.shouhuo.sheng,
							city: this.shouhuo.city,
							qu: this.shouhuo.qu,
							address: this.shouhuo.address,
							moren: 0
						}
						Axios.post('/shopmng/api/dizhi/add', dz).then(res => {
							if (res.data.affectedRows == 1) {
								ElMessage({
									message: '添加成功',
									type: 'success',
								});
								this.show = false;
								this.dz.push(dz);
								this.shouhuo = {};
								this.showaddress()
							} else {
								ElMessage.error('添加失败')
							}
						});
					} else {
						return false
					}
				})
			},
		}

	}
</script>

<style>
</style>
